<template>
    <div v-if="total" class="pagination">
        <el-pagination
            :current-page="pageNo"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :layout="layout"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'Pagination',
    props: {
        pageNo: {
            type: Number,
            default: 1,
        },
        pageSizes: {
            type: Array as any,
            default: () => [10, 20, 30, 40, 100],
        },
        total: {
            type: Number,
            default: 0,
        },
        pageSize: {
            type: Number,
            default: 10,
        },
        layout: {
            type: String,
            default: 'total, sizes, prev, pager, next, jumper',
        },
    },
    emits: ['changePage', 'changePageSize'],
    setup(props, { emit, attrs }) {
        const handleCurrentChange = (page: number): void => {
            emit('changePage', page);
        };
        const handleSizeChange = (pageSize: number): void => {
            emit('changePageSize', pageSize);
        };
        return {
            handleCurrentChange,
            handleSizeChange,
        };
    },
});
</script>

<style lang="scss" scoped>
.pagination {
    width: 100%;
    display: flex;
    justify-content: right;
    margin-top: 20px;
}
</style>
